<script lang="ts" setup>
defineProps<{
    id: number
    title: string
    active?: boolean
}>()

const {change} = $(useCategory())

</script>

<template>
    <view class="select_item" :class="active && 'active'" @click="change({ categoryId: id })">
        <text>{{ title }}</text>
    </view>
</template>

<style lang="scss" scoped>
.select_item {
    width: 260rpx;
    color: #555555;
    font-size: 20rpx;
    line-height: 40rpx;
    border-radius: 10rpx;
    padding-left: 20rpx;
    margin-bottom: 24rpx;
    background-color: #f7f7f7;

    &.active {
        color: #f38e48;
        background-color: rgba(255, 230, 212, 0.97);
    }
}
</style>
